<template>
  <div class="news_center">
    <div class="news_left" style="" v-if="data.length > 0">
      <div class="bg">
        <h2 class="h2-title mb20">新闻中心</h2>
        <p class="describe">创意驱动 助力增值</p>
        <div class="images">
          <a href="" target="_blank">
            <img :src="data[0].thumb" alt="" />
          </a>
        </div>
        <div class="type">
          <span class="span1">{{data[0].class_name}}</span>
          <span class="cda1a45 pl10 pr10">/</span>
          <span class="span2">{{data[0].created_at}}</span>
        </div>
        <h3>
          <a href="" target="_blank"> {{data[0].title}} </a>
        </h3>
        <p style="font-size: 14px" v-html="data[0].content"></p>
        <a href="" target="_blank" class="view-more">查看详情↓</a>
      </div>
    </div>
    <div class="news_right">
      <ul>
        <NewsItem :data=data />
      </ul>
    </div>
  </div>
</template>

<script setup>
import img from "../../assets/imgs/center.jpg";
import NewsItem from "./NewsItem.vue";

	const props = defineProps({
		data: {
			type: Array,
			default: () => []
		}
	})


</script>

<style lang="less" scoped>
.pr10 {
  padding-right: 10px;
}

.pl10 {
  padding-left: 10px;
}
.mb20 {
  margin-bottom: 20px;
}

.cda1a45 {
  color: #da1a45;
}
.news_center {
  background: #fff;
  padding: 50px 0;
  display: flex;
  width: 1400px;
  margin: 0 auto;
  .news_left {
    width: 464px;
    margin-right: 30px;
    color: #fff;
    position: relative;
    .bg {
      padding: 50px 25px;
      background-color: #333;
    }
    p {
      color: #868686;
      margin-bottom: 20px;
      s &.describe {
        font-size: 16px;
        margin-bottom: 60px;
      }
    }
    .describe {
      font-size: 16px;
      margin-bottom: 60px;
    }
    .images {
      margin-bottom: 10px;
      a {
        display: block;
        width: 100%;
        height: 100%;
        overflow: hidden;
        img {
          width: 100%;
          height: 100%;
          transition: all 0.4s ease-in-out;
        }
        &:hover img {
          transform: scale(1.2);
        }
      }
    }
    .h2-title {
      font-size: 32px;
      line-height: 32px;
    }
    .type {
      margin-bottom: 25px;
      font-size: 12px;
      span {
        font-weight: bold;
      }
      .span1 {
        color: #868686;
      }
    }
    h3 {
      font-size: 16px;
      line-height: 24px;
      margin-bottom: 35px;
      a {
        color: #ffffff;
      }
      &:hover a {
        color: #da1a45;
      }
    }
    .view-more {
      color: #eeeeee;
      font-size: 13px;
      &:hover {
        color: #da1a45;
      }
    }
  }
  .news_right {
    width: 906px;
    overflow: hidden;
    ul {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      width: 950px;
      li {
        display: inline-block;
        width: 210px;
        margin-right: 22px;
        margin-bottom: 30px;
      }
    }
  }
}
</style>
